﻿<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>省市区三联动</title>

	<style>
	 #area select {background: transparent;padding: 5px;font-size: 14px;border: 1px solid #ccc;height: 120px;width: 200px;float:left}
     .item{float:left;margin-left: 20px}
	 .item p{float:left;padding:0;margin:0;line-height: 30px}
	 #value_c{width:100%;min-height: 100px;height: auto}
	 #value_c>div{margin:15px 10px}
	 #value_c>div p{float:left;height: 30px;line-height: 30px;padding:0;margin:0}
	 #value_c>div input{float:left;height: 20px;margin:5px 0}
	 #value_c>div{float:left}
	 button{margin-left: 30px;height: 40px;width: 60px;line-height: 30px;text-align:center;border:1px solid #ddd;border-radius: 3px;background:#fff}
	</style>

</head>

<body style="min-width:880px">

		<div id="value_c"></div>
		<p style="clear:both"></p>
		<div id="area">
			<div class="item">
				<p>省：</p>
				<select multiple size="5" name="" id="sheng">
					<option disabled>请选择省份</option>
				</select>
			</div>
			<div class="item">
				<p>市：</p>
				<select multiple size="5" name="" id="shi">
					<option disabled>请选择城市</option>
				</select>
			</div>

			<div class="item">
				<p> 区：</p>
				<select multiple size="5" name="" id="qu">
					<option disabled>请选择区</option>
				</select>
			</div>

			<button onclick="add()">添加</button>
            <p style="clear:both"></p>

            <button onclick="aa()">aa</button>
		</div>
	<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
	<script src="js/area.js"></script>
	<script type="text/javascript">

		var sheng = document.getElementById('sheng')
		var shi = document.getElementById('shi')
		var qu = document.getElementById('qu')
		var code =[]

		// 循环第一步,把省循环进select
		for (var i = 0; i < provinceList.length; i++) {
			sheng.options[sheng.length] = new Option(provinceList[i].text,provinceList[i].value);
			// 循环第二步,把所有的市都循环进select
			sheng.onchange = function () {
				var sheng_count = $('#sheng option:selected').val();
				shi.options.length = 1;
				qu.options.length = 1;
				// shi.options[shi.length] = new Option("请输入市");
				for (var j = 0; j < cityList[sheng_count].length; j++) {
					shi.options[shi.length] = new Option(cityList[sheng_count][j].text,cityList[sheng_count][j].value)
				}

			}
			shi.onchange = function () {
				var shi_count = $('#shi option:selected').val();
				qu.options.length = 1;
				for (var k = 0; k < areaList[shi_count].length; k++) {
					qu.options[qu.length] = new Option(areaList[shi_count][k].text,areaList[shi_count][k].value);
				};
			}
		};
		
		var selecteDvalue =[];
		var arr = [];
		var content = $('#value_c');
		
		function add(){
		    var chi=$('.check');
			if($("#sheng").find("option:selected").text() != ''){
				selecteDvalue = [];
				$("#sheng").find("option:selected").each(function(val,index){
					if(cc().indexOf($(this).val()) == -1){
                        selecteDvalue.push({text:$(this).text(),value:$(this).val()});
					}
					
					
					
				})
			}
		

			if($("#shi").find("option:selected").text() != ''){
				selecteDvalue = [];
				$("#shi").find("option:selected").each(function(val,index){
					if(cc().indexOf($(this).val()) == -1){
					  selecteDvalue.push({text:$(this).text(),value:$(this).val()});
					}
				})
			}
			
			if($("#qu").find("option:selected").text() != ''){
				selecteDvalue = [];
				$("#qu").find("option:selected").each(function(val,index){
					if(cc().indexOf($(this).val()) == -1){
					  selecteDvalue.push({text:$(this).text(),value:$(this).val()});
					}
				})
			}
			
			
			
			
			
			console.log(selecteDvalue);
			
			var str='';
			for(var i =0;i<selecteDvalue.length;i++){

				if(arr.indexOf(selecteDvalue[i]) == -1){
					arr = arr.concat(selecteDvalue[i]);
					str +='<div class="check"><input checked  type="checkbox"'+'name='+selecteDvalue[i].value+ '  /><p>'+ selecteDvalue[i].text +'</p></div>'
				}
			
				
			}

           content.append(str)

		}
		
       function aa(){
	    var code=[];
		$('.check').each(function(){
			code.push($(this).find('input').attr('name'))
		})
			console.log(code)
	   }

	   function cc(){
		var bb =[];
		$('.check').each(function(){
			bb.push($(this).find('input').attr('name'))
		})
		return bb
	   }
	</script>


</body>

</html>